<html>
<head>
    <meta charset="utf-8">
    <title>iview示例</title>
    <link rel="stylesheet" type="text/css" href="statics/css/iview.css">
    <link rel="stylesheet" type="text/css" media="screen" href="https://cdn.bootcss.com/ionicons/2.0.1/css/ionicons.min.css">
    <script type="text/javascript" src="statics/lib/vue.min.js"></script>
    <script type="text/javascript" src="statics/lib/iview.min.js"></script>
    <script type="text/javascript" src="statics/lib/jquery.min.js"></script>

    <style scoped>
        .layout{
            border: 1px solid #d7dde4;
            background: #f5f7f9;
            position: relative;
            border-radius: 4px;
            overflow: hidden;
        }
        .layout-header-bar{
            background: #fff;
            box-shadow: 0 1px 1px rgba(0,0,0,.1);
        }
        .logo{
            width: 251px;
            text-align: center;
            position: relative;
            font-size: 25px;
            line-height: 50px;
            color: aliceblue;
            background: #367fa9;
        }
        body {
            font-family: cursive;
        }
        .logout{
            float: right;
            text-align: center;
            font-size: 20px;
            margin: 10px 15px 5px auto;
            height: 100%;
            color: aliceblue;
        }
        .logout li{
            display: block;
        }
        .welcomeDiv{
            /*color: #495060;*/
            float:left;
            font-size: 20px;
            height: 100%;
            margin: auto;
            color:#fff;
            padding:15px 10px;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="layout">
        <Sider :style="{position: 'fixed', height: '100vh', left: 0, width:'250px'}" style="max-width:250px">
            <div class="logo">
                <span>后台系统Blog</span>
            </div>
            <i-menu active-name="1-2" theme="dark" :open-names="['1']">
                <Submenu v-for="item in menuData" :name="item.name">
                    <template slot="title">
                        <Icon :type="item.type"></Icon>{{item.label}}
                    </template>
                    <menu-item v-for="mi in item.menuitems" :name="mi.name">
                        <template slot="title">
                            <Icon :type="mi.type"></Icon>{{item.label}}
                        </template>
                        <label @click="forwardToItem(mi.url)">{{mi.label}}</label>
                    </menu-item>
                </Submenu>
            </i-menu>
        </Sider>
        <Layout :style="{marginLeft: '250px'}">
            <Header :style="{background: '#3c8dbc', boxShadow: '0 2px 3px 2px rgba(0,0,0,.1)' , height: '50px'}">
                <div class="welcomeDiv">
                    <span>欢迎，管理员</span>
                </div>
                <div class="logout">
                    <ul>
                        <li>
                            <a style="color:aliceblue" href="logout">
                                <Icon type="share"></Icon>退出系统
                            </a>
                        </li>
                    </ul>
                </div>
            </Header>
            <Content :style="{padding: '0 16px 16px'}" style="background-color: #f0f2f5; background-size: contain;
            background-image: url(statics/images/main_bg.svg)">
                <Breadcrumb :style="{margin: '5px 0'}">
                    <Breadcrumb-Item>Home</Breadcrumb-Item>
                    <Breadcrumb-Item>Components</Breadcrumb-Item>
                    <Breadcrumb-Item>Layout</Breadcrumb-Item>
                </Breadcrumb>
                <Card>
                    <div style="height: 76%">
                        <section class="content" style="background:#fff;">
                            <iframe scrolling="no" frameborder="0" width="100%" height="100%" :src="main"></iframe>
                        </section>

                    </div>
                </Card>
            </Content>
            <Footer class="layout-footer-right">
                <div>
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2011-2016 &copy; Alennus
                </div>
            </Footer>
        </Layout>

    </div>
</div>

<script type="text/javascript" src="statics/js/index.js"/>
<script>
    var vue = new Vue({
        el: '#app',
        data:{
            main:'login.html',
            menuData:[
                {   label:'菜单1',name:"m1",type:"ios-analytics",
                    menuitems:[
                        {name:'m1-1',label:'菜单1-1',url:'login.html'},
                        {name:'m1-2',label:'菜单1-2',url:'grid.html'},
                        {name:'m1-3',label:'菜单1-3',url:'button.html'},
                        {name:'m1-4',label:'菜单1-4',url:'table.html'},
                    ]
                },
                {   label:'菜单2',name:"m2",type:"link",
                    menuitems:[
                        {name:'m2-1',label:'菜单2-1',url:'http://wallimn.iteye.com'},
                        {name:'m2-2',label:'菜单2-2',url:'m2-1.html'},
                        {name:'m2-3',label:'菜单2-3',url:'m2-1.html'},
                        {name:'m2-4',label:'菜单2-4',url:'m2-1.html'},
                    ]
                },
                {   label:'菜单3',name:"m3",type:"ios-keypad",
                    menuitems:[
                        {name:'m3-1',label:'菜单3-1',url:'m3-1.html'},
                        {name:'m3-2',label:'菜单3-2',url:'m3-1.html'},
                        {name:'m3-3',label:'菜单3-3',url:'m3-1.html'},
                        {name:'m3-4',label:'菜单3-4',url:'m3-1.html'},
                    ]
                },
                {   label:'菜单4',name:"m4",type:"ios-analytics",
                    menuitems:[
                        {name:'m4-1',label:'菜单4-1',url:'m4-1.html'},
                        {name:'m4-2',label:'菜单4-2',url:'m4-1.html'},
                        {name:'m4-3',label:'菜单4-3',url:'m4-1.html'},
                        {name:'m4-4',label:'菜单4-4',url:'m4-1.html'},
                    ]
                }
            ],
        },
        methods:{
            forwardToItem : function (url) {
                console.info(url);
                this.main=url;
            },
            info: function () {
                console.info("ssssss");
            }
        }
    })
</script>
</body>
</html>